
<template>
 <div class="activity-etu">
    <!-- 页头 -->
    <PageHeader :lang="lang" @annClose="getMsgFromChild"></PageHeader>

    <!-- banner -->
    <div class="top-banner">
      <img :src='bannerPath' />
    </div>

    <!-- 主体内容 -->
    <div class="container">
      <!-- 交易排名奖 -->
      <div class="title">
        <em>————————</em><h5>{{Lang['ranking award']}}</h5><em>————————</em>
      </div>
      <div class="content rank">
        <ul>
          <li>
            <caption class="top-2">{{Lang['second place']}}</caption>
            <div class="image">
             <img src="./images/reward2.png"/>
            </div>
            <span v-html="Lang['reward2']"></span>
          </li>
          <li>
            <caption class="top-1">{{Lang['champion']}}</caption>
            <div class="image" style="width:300px;height:225px;">
             <img src="./images/reward1.png" />
            </div>
            <span v-html="Lang['reward1']"></span>
          </li>
          <li>
            <caption class="top-3">{{Lang['third place']}}</caption>
            <div   class="image">
            <img  src="./images/reward3.png" />
            </div>
            <span v-html="Lang['reward3']"></span>
          </li>
          <li>
            <caption class="top-other">{{Lang['ranking4 6']}}</caption>
            <span v-html="Lang['reward4 6']"></span>
          </li>
          <li>
            <caption class="top-other">{{Lang['ranking7 10']}}</caption>
            <span v-html="Lang['reward7 10']"></span>
          </li>
          <li>
            <caption class="top-other">{{Lang['ranking11 100']}}</caption>
            <span v-html="Lang['reward11 100']"></span>
          </li>
          <li>
            <span>{{Lang['add reward']}}</span>
          </li>
        </ul>
      </div>

      <!-- 交易参与奖 -->
      <div class="title">
        <em>————————</em><h5>{{Lang['participate award']}}</h5><em>————————</em>
      </div>
      <div class="title sub-title">
        <h5>{{Lang['parti sub']}}</h5>
      </div>
      <div class="content participate">
        <div class="no-login" v-show="!mixUserInfo.userName">
          <h5>{{Lang['nolog']}}</h5>
          <router-link  :to="{path: '/user/login', query: {from: $route.name}}">{{Lang['login']}}</router-link>
        </div>
        <div class="login" v-show="mixUserInfo.userName">
          <h5>{{Lang['net share']}}<br/> <em>1.5032 BTC</em></h5>
          <router-link  :to="{path: '/user/login', query: {from: $route.name}}">{{Lang['go to trade']}}</router-link>
        </div>
      </div>

      <!-- 排行榜 -->
      <div class="title">
        <em>————————</em><h5>{{Lang['top list']}}</h5><em>————————</em>
      </div>
      <div class="content toplist">
        <dl><dd>{{Lang['rank']}}</dd><dd>{{Lang['users']}}</dd><dd>{{Lang['net share BTC']}}</dd></dl>
        <ul>
          <li v-for="(item,index) in toplist" :key="index">
            <dd>{{item.rank}}</dd>
            <dd></dd>
            <dd>{{item.username}}</dd>
            <dd>{{item.share}}</dd>
            <dd></dd>
          </li>
        </ul>
      </div>

      <!-- 活动规则 -->
      <div class="title">
        <em>————————</em><h5>{{Lang['rules']}}</h5><em>————————</em>
      </div>
      <div class="content rules">
        <p>
         {{Lang['rule i1']}}
        </p><p>
         {{Lang['rule i2']}}
          </p><p>
          {{Lang['rule i3']}}
          </p><p>
         {{Lang['rule i4']}}
          </p><p>
          {{Lang['rule i5']}}
          </p><p>
          {{Lang['rule i6']}}
          </p><p>
          {{Lang['rule i7']}}
      </p>

      </div>
    </div>
    <!-- 页脚 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
 </div>
</template>
<script>
import {mapGetters } from 'vuex'
import commonMixins from '@/mixins/common.js'
import IndexHeader from '@/components/PageHeader/index.vue'
import IndexFooter from '@/components/PageFooter/pageBottom.vue'
export default {
  mixins: [commonMixins],
  data(){
    return {
      bannerPath: '',
      isLoged: false,
      toplist:[
        {
          rank:1,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:2,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:3,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:4,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:5,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:6,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:7,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:8,
          username:'158*9806',
          share:'15.0878'
        },
        {
          rank:9,
          username:'158*9806',
          share:'15.0878'
        },{
          rank:10,
          username:'158*9806',
          share:'15.0878'
        },{
          rank:100,
          username:'158*9806@gmail.com',
          share:'1523.0878'
        },
      ]
    }
  },
  components:{
    IndexHeader,
  },
  computed:{
      Lang () {
        return this.$store.state.lang.lang["activityETU"]
      },
      ...mapGetters({
        customInfo: 'customInfo'
      })
  },
  watch: {
    langKey () {
      this.setBanner()
    }
  },
  methods: {
    // banner图
    setBanner () {
      var curLangkey = this.langKey
      console.log(curLangkey)
      if (curLangkey === 'zh-CN' || curLangkey === 'ko' || curLangkey === 'vi' || curLangkey === 'ja' || curLangkey === '' ||  curLangkey === 'fr') {
        this.bannerPath = './src/pages/invite/images/etu-banner-en.png'
      } else {
        this.bannerPath = './src/pages/invite/images/etu-banner' + curLangkey + '.png'
      }
    }
    // 获取净购买额

  },
  mounted () {
    this.setBanner()
  }
}
</script>
<style lang="less" scoped>

.activity-etu{
  .top-banner{
    width: 100%;
    margin:0 auto;

    img {
      width: 100%;
    }
  }
  .container{
    font-family:'PingFangSC-Regular'!important;
    display:flex;
    flex-flow:column nowrap;

    .title{
      margin-top:30px;
      display:flex;
      flex-flow:row nowrap;
      color:#fff;
      line-height:60px;
      height:60px;
      align-items: center;
      justify-content: center;
      h5{
        min-width:166px;
        text-align:center;
        font-size:14px;
      }
      em{color:#253e8a}
    }
    .sub-title{
      margin-top:-15px;
    }
    .content{
      color:#fff;
      margin:20px auto;
      width:1200px;
      border-radius: 10px;
    }
    .rank{
      background:#1a1a1a;
      height:610px;
      ul{
        width:100%;
        display:flex;
        flex-flow:row wrap;
        li{
          display:flex;
          flex-flow:column nowrap;
          width:33.3%;
          margin-top:42px;
          justify-content: center;
          align-items: center;
          span{
            text-align:center;
            line-height:21px;
            margin-top:16px;
          }
          &:last-child{
            width:100%;
            margin-top:40px;
            span{color:#c2c2c2;font-size:12px;}
          }
          caption{
            display:flex;
            width:103px;
            height:25.1px;
            align-items: center;
            justify-content: center;
            border-radius: 12.5px;
          }
          .top-1{
            background: linear-gradient(135deg, #FFC773 0%, #E99519 100%);
          }
          .top-2{
            background: linear-gradient(135deg, #ABC6D7 0%, #6A879D 100%);
          }
          .top-3{
            background: linear-gradient(135deg, #C4977A 0%, #825728 100%);
          }
          .top-other{
            border-radius: 4px;
            background-image: linear-gradient(transparent 66%, #223262 100%);
          }
          .image{
            border-radius: 10px;
            margin-top:20px;
            overflow: hidden;
            width:200px;
            height:150px;
            background:#d8d8d8;
            img{width:100%;height:100%;}
          }

        }
      }
    }
    .participate{
      background: linear-gradient(135deg, #8197AE 0%, #435971 100%);
      height:80px;
      margin-top:2px;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .toplist{
      background:#4e6175;
      height:490px;
      margin-top:5px;
      dl{
        font-size:12px;
        background:#879fb8;
        height:40px;
        border-radius: 10px 10px 0 0;
        display:flex;
        flex-flow:row nowrap;
        justify-content: space-between;
        align-items: center;
        padding:0 50px;
        dd{
          width:758px;
          text-align:center;
          &:first-child{width:120px;text-align:left}
          &:last-child{width:220px;text-align:right}
        }
      }
      ul{
        padding:0 10px;
        li{
          border-bottom:1px solid #879fb8;
          height:40px;
          display:flex;
          flex-flow:row nowrap;
          justify-content: space-between;
          align-items: center;
          &:last-child{border:none}
          dd{
            font-size:12px;
            display:inline-block;
            &:nth-child(1){width:100px;text-align:center}
            &:nth-child(2){width:388px;}
            &:nth-child(3){width:428px;text-align:left}
            &:nth-child(4){width:160px;text-align:right}
            &:nth-child(5){width:24px;}
          }
        }
      }
    }
    .rules{
      margin-top:-18px;
      padding-bottom:50px;
      p{
        font-size:14px;
        line-height:20px;
        margin-top:24px;
      }
    }
    .login,.no-login{
      width:800px;
      padding:0 200px;
      display:flex;
      justify-content: space-between;
      align-items: center;
      a{
        background-image: linear-gradient(139deg, #80B6FF 0%, #3187FF 100%);
        border-radius: 18px;
        width:120px;
        height:36px;
        color:#fff;
        display:flex;
        justify-content: center;
        align-items: center;
      }
      h5{
        line-height:32px;
        em{font-size:14px;}
      }
    }
  }
}
</style>
